<template>
	<el-card class="main2">
		<div slot="header">
			<span>成绩管理/个人成绩管理</span>
		</div>
		<p>
			<el-select v-model="banjiId" :size="size" clearable placeholder="请选择班级">
				<el-option v-for="bj in bjs" :key="bj.id" :value="bj.id" :label="bj.name"></el-option>
			</el-select>
			<el-select v-model="studentId" :size="size" clearable placeholder="请选择学生" style="margin-left: 1.25rem;">
				<el-option v-for="stu in students" :key="stu.id" :value="stu.id" :label="stu.name"></el-option>
			</el-select>
		</p>
		<el-table v-if="tableVisible" :data="data" border :size="size" highlight-current-row>
			<el-table-column v-for="col in cols" :key="col.id" :prop="col.prop" :label="col.label"></el-table-column>
			<el-table-column label="成绩" :width="150">
				<template slot-scope="scope">
					<el-input  v-model="scope.row.grade" @change="onGradeChange(scope.row)" :size="size"></el-input>
				</template>
			</el-table-column>
		</el-table>
	</el-card>

</template>

<script>
	export default {
		data() {
			return {
				banjiId: '',
				studentId:'',
				bjs:[],
				students:[],
				data:[],
				size:'small',
				cols:[
					{prop:'student.stuNo',label:'学号'},
					{prop:'student.name',label:'姓名'},
					{prop:'course.name',label:'课程'}
				]
			}
		},
		methods:{
			onGradeChange(row){
				if(Number.isInteger(Number(row.grade))){
					var param={id:row.id,studentId:row.student.id,courseId:row.course.id,grade:row.grade};
					this.$ajax.post('grade/save',param).then(res=>{
						var result=res.data;
						if(result.success){
							this.$notify.success({message:'成绩保存的成功',position:'bottom-right'});
						}
					})
				}else{
					console.log(row.grade,String.isInteger(row.grade));
					this.$message.error('成绩必须为数字');
					row.grade='';
				}
			}
		},
		computed:{
			tableVisible(){
				return this.banjiId&&this.studentId
			}
		},
		mounted() {
			this.$ajax.post('banji/list',{}).then(res=>{
				var result=res.data;
				this.bjs=result;
			})
		},
		watch:{
			banjiId(val){
				this.studentId='';
				if(val){
					this.$ajax.post('student/list',{tbClassId:val}).then(res=>{
						var result=res.data;
						this.students=result;
					})
				}else{
					this.students.empty();
				}
			},
			studentId(val){
				if(val){
					var param={studentId:val};
					this.$ajax.post('grade/list',param).then(res=>{
						var result=res.data;
						this.data=result;
					})
				}
			}
		}
	}
</script>

<style scoped>
</style>
